.table-container {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  overflow-x: auto;
}

// table ------------------------------------------------------ start
.table {
  min-width: 100%;
  box-sizing: border-box;
  display: table;
  padding: 0 8px;
  background-color: $kaoyan-color-14;
  border-radius: 16px;
  overflow: hidden;
}
.table-thead {
  display: table-header-group;
}
.table-tr {
  box-sizing: border-box;
  display: table-row;
}
.table-td {
  box-sizing: border-box;
  padding: 8px 4px;
  display: table-cell;
  color: $kaoyan-color-9;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 42px;
  white-space: nowrap;
  text {
    display: block;
    line-height: 1.4;
  }
}
.table-thead .table-td {
  font-weight: 600;
  line-height: 32px;
}
.table-tr:not(:last-child) {
  .table-td {
    border-bottom: 1px solid $kaoyan-color-12;
  }
}
.table-noborder {
  .table-tr:not(:last-child) {
    .table-td {
      border-bottom: none;
    }
  }
}
.table-td .index {
  display: inline-block;
  font-size: 14px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  color: $kaoyan-color-14;
  border-radius: 10px;
  background-color: $kaoyan-color-10;
}
// table ------------------------------------------------------ end
// table-x ------------------------------------------------------ start
.table-x {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 16rpx;
  background-color: $kaoyan-color-14;
  border-radius: 32rpx;
  overflow: hidden;
}
.table-thead-x, .table-tr-x {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.table-td-x {
  box-sizing: border-box;
  padding: 16rpx 4rpx;
  color: $kaoyan-color-9;
  text-align: center;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 84rpx;
  white-space: nowrap;
  text {
    display: block;
    line-height: 1.4;
  }
}
.table-thead-x .table-td-x {
  font-weight: 600;
  line-height: 64rpx;
}
.table-x-border {
  .table-tr-x:not(:last-child) {
    .table-td-x {
      border-bottom: 2rpx solid $kaoyan-color-12;
    }
  }
}
.table-td-x .index-x {
  display: inline-block;
  font-size: 28rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-weight: 600;
  text-align: center;
  color: $kaoyan-color-14;
  border-radius: 20rpx;
  background-color: $kaoyan-color-10;
}

// table-x ------------------------------------------------------ end

// table-x ------------------------------------------------------ start
